<template>
  <scroll-view scroll-y @scrolltolower="reachBottom">
    <view class="operating-const">
      <ve-card>
        <ve-cell-price label="支出总额" :value="total?.feeAmount"></ve-cell-price>
        <ve-cell-price label="已付款金额" :value="total?.payAmount"></ve-cell-price>
      </ve-card>
      <template v-for="item in (dataSource as any)" :key="item">
        <ve-card :title="`支出单号：${item.code}`" type="none" :fold="true" v-model:initFold="item.initFold">
          <ve-cell-price label="支出总额" :value="item.amount"></ve-cell-price>
          <ve-cell label="关联工单号">{{ item.workCode || '-' }}</ve-cell>
          <ve-cell label="费用产生机构">{{ item.feeOrgName || '-' }}</ve-cell>
          <ve-cell label="支出单类型">{{ item.costTypeName || '-' }}</ve-cell>
          <ve-cell label="用途及金额">
            <view>
              <template v-for="use in item.feeList" :key="use">
                <view>{{ use.itemName }} - {{ unitVal(use.amount) }}</view>
              </template>
            </view>
          </ve-cell>
          <ve-cell label="车辆信息">
            <view class="checkFlow">
              <view v-for="(carInfo, index) in item.feeList" :key="index">
                {{ carInfo.carId ? `${carInfo.licenseNo} ${carInfo.carModel}` : '-' }}
              </view>
            </view>
          </ve-cell>
          <ve-cell label="申请人">{{ item.applyStaffName || '-' }}</ve-cell>
          <ve-cell label="审批流">
            <view class="flex">
              <template v-for="(flow, index) in item.checkFlowList" :key="flow">
                {{ flow.staffName }}
                <view v-if="index !== item.checkFlowList.length - 1">&nbsp; - &nbsp;</view>
              </template>
            </view>
          </ve-cell>
          <ve-cell label="申请时间">{{ item.applyTime || '-' }}</ve-cell>
          <ve-cell label="审批状态">{{ item.checkStatusName || '-' }}</ve-cell>
          <ve-cell label="付款状态">{{ item.payStatusName || '-' }}</ve-cell>
          <ve-cell label="付款时间">{{ item.payTime || '-' }}</ve-cell>
          <ve-cell label="申请备注">{{ item.remark || '-' }}</ve-cell>
        </ve-card>
      </template>
    </view>
    <!-- 加载结束列表为空时展示 -->
    <ve-empty v-if="dataSource?.length == 0 && loadStatus == 'nomore'"></ve-empty>
    <!-- 底部加载状态 -->
    <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
  </scroll-view>
</template>

<script setup lang="ts">
  import useList from '@/hooks/useList'
  import { ref, onMounted } from 'vue'
  import { getOperateCostTotalAPI } from '@/api/order/order'
  import { unitVal } from '@/utils'

  const props = defineProps({
    orderId: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
  })

  const queryParam = ref<any>({})

  const { reachBottom, loadData, loadStatus, dataSource } = useList('/V5/cost/list', queryParam, (data: any) => {
    console.log(data)

    data?.forEach((item: any) => {
      item.initFold = true
    })
  })

  const total = ref()
  const getOperateCostTotal = async (businessId: string, businessType: string) => {
    const res = await getOperateCostTotalAPI({ businessId, businessType })
    total.value = res.result
  }

  onMounted(() => {
    queryParam.value.businessId = props.orderId
    queryParam.value.businessType = props.type
    loadData()
    getOperateCostTotal(props.orderId, props.type)
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }

  .operating-const {
    padding: 24rpx 24rpx;
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .checkFlow {
    display: flex;
    flex-direction: column;
  }
</style>
